<template>
  <div class="logo">
    <h1 v-if="showTitle">{{ globleTitle()?globleTitle():sysTitle }}</h1>
  </div>
</template>

<script>
  import { mixin } from '@/utils/mixin.js'
  import { ACCESS_TOKEN,GLOBLE_TITLE } from '@/store/mutation-types'
  import { mapActions, mapGetters, mapState } from 'vuex'
  import Vue from 'vue'

  export default {
    name: 'Logo',
    mixins: [mixin],
    props: {
      showTitle: {
        type: Boolean,
        default: true,
        required: false
      }
    },
    data(){
      return{
        sysTitle:window.SYS_TITLE
        // sysTitle:Vue.ls.get(GLOBLE_TITLE)?Vue.ls.get(GLOBLE_TITLE):window.SYS_TITLE
      }
    },
    ...mapActions([
        "GlobleTitle"
      ]
    ),
    ...mapGetters(['globleTitle']),
    methods:{
      ...mapGetters(['globleTitle']),
    },
    mounted() {
      console.log(this.sysTitle)
      console.log(window.SYS_TITLE)
    }
  }
</script>
<style lang="less" scoped>
  /*缩小首页布 局顶部的高度*/
  @height: 59px;

  .sider {
    box-shadow: none !important;
    .logo {
      color: #ffffff;
      height: @height !important;
      line-height: @height !important;
      box-shadow: none !important;
      transition: background 300ms;
      background: #002140;
      h1 {
        font-size: 24px;
        color: #ffffff;
      }
      a {
        color: white;
        &:hover {
          color: rgba(255, 255, 255, 0.8);
        }
      }

    }

    &.light .logo {
      background-color: @primary-color;
    }
  }
</style>